<!--
*******************************************************************************
 * Copyright © 2022-2023 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->
 
<div class="card">
    <div class="card-header">
      <i class="fa fa-tags text-danger mr-2"></i>
      <span class="font-weight-bold">EdgeX Sink</span>
    </div>
    <div class="card-body">
        <form>
          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">
                <span class="mr-2">Type</span>
                <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="format tips" 
                data-content='the type of EdgeX message bus'></span>
              </label>
              <div class="col-sm-9">
                <select class="custom-select" name="type" [(ngModel)]="edgeXSink.type">
                  <option value="redis">redis</option>
                  <option value="zero">zero</option>
                  <option value="mqtt">mqtt</option>
                </select>
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">Protocol</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="protocol" [(ngModel)]="edgeXSink.protocol">
              </div>
          </div>
      
          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">Host</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="host" [(ngModel)]="edgeXSink.host">
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">Port</label>
              <div class="col-sm-9">
                <input type="number" class="form-control" name="port" [(ngModel)]="edgeXSink.port">
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">
                <span class="mr-2">Topic</span>
                <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="format tips" 
                      data-content='The topic to be published. The topic is static across all messages. To use dynamic topic, leave this empty and specify the topicPrefix property. Only one of the topic and topicPrefix properties can be specified. If both are not specified, then use default topic value application.'></span>
              </label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="topic" [(ngModel)]="edgeXSink.topic">
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">
                <span class="mr-2">TopicPrefix</span>
                <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="format tips" 
                data-content='The prefix of a dynamic topic to be published. The topic will become a concatenation of $topicPrefix/$profileName/$deviceName/$sourceName.'></span>
              </label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="topicPrefix" [(ngModel)]="edgeXSink.topicPrefix">
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">ContentType</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="contentType" [(ngModel)]="edgeXSink.contentType">
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">
                <span class="mr-2">MessageType</span>
                <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="format tips" 
                data-content='The EdgeX message model type. To publish the message as an event like EdgeX application service, use event. Otherwise, to publish the message as an event request like EdgeX device service or core data service, use request. If not specified, then use the default value event.'></span>
              </label>
              <div class="col-sm-9">
                  <select class="custom-select" name="messageType" [(ngModel)]="edgeXSink.messageType">
                      <option value="event">event</option>
                      <option value="request">request</option>
                  </select>
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">
                <span class="mr-2">Metadata</span>
                <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="format tips" 
                data-content='The property is a field name that allows user to specify a field name of SQL select clause, the field name should use meta(*) AS xxx to select all of EdgeX metadata from message.'></span>
              </label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="metadata" [(ngModel)]="edgeXSink.metadata">
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">ProfileName</label>
              <div class="col-sm-9">
                <app-device-profile-combo-list 
                [singleSelectionMode]="true"
                [(singleProfileSelected)]="edgeXSink.profileName"
                ></app-device-profile-combo-list>
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">DeviceName</label>
              <div class="col-sm-9">
                <app-device-combo-list 
                [singleSelectionMode]="true"
                [(singleDeviceSelected)]="edgeXSink.deviceName"></app-device-combo-list>
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">SourceName</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="deviceName" [(ngModel)]="edgeXSink.sourceName">
              </div>
          </div>

          <!--some common properties of each one sink is show here, because they are used more frequently, 
            especial the dataTemplate property is treated as request body of http request or paylod of mqtt-->
          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">
                  <span class="mr-2">SendSingle</span>
                  <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="format tips" 
                  data-content='The output messages are received as an array. This is indicate whether to send the results one by one. If false, the output message will be {"result":"${the string of received message}"}. For example, {"result":"[{\"count\":30},"\"count\":20}]"}. Otherwise, the result message will be sent one by one with the actual field name. For the same example as above, it will send {"count":30}, then send {"count":20} to the RESTful endpoint.Default to false.'></span>
              </label>
              <div class="col-sm-9">
                  <select class="custom-select" name="sendSingle" [(ngModel)]="edgeXSink.sendSingle">
                      <option [ngValue]="false">false</option>
                      <option [ngValue]="true">true</option>
                  </select>
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">
                  <span class="mr-2">DataTemplate</span>
                  <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="format tips" 
                  data-content='The golang template format string to specify the output data format. The input of the template is the sink message which is always an array of map. If no data template is specified, the raw input will be the data.'></span>
              </label>
              <div class="col-sm-9">
                  <input type="text" class="form-control" name="dataTemplate" [(ngModel)]="edgeXSink.dataTemplate">
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">
                <span class="mr-2">EdgeX Sink Options</span>
                <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="format tips" 
                data-content='EdgeX Message bus connection optional'></span>
              </label>
              <div class="col-sm-9">
                  <app-edgex-sink-optional [(optional)]="edgeXSink.optional"></app-edgex-sink-optional>
              </div>
          </div>

          <div class="form-group row">
              <label class="col-sm-3 col-form-label text-nowrap text-truncate">Advanced Options</label>
              <div class="col-sm-9">
                <app-sink-base-properties [sinkBaseProperties]="sinkBaseProperties"  (sinkBasePropertiesChange)="onSinkBasePropertiesChange($event)"></app-sink-base-properties>
              </div>
          </div>
        </form>
    </div>
</div>